import React from 'react';
import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';

export type SafeAreaViewProps = {
    style?: StyleProp<ViewStyle>;
};

export const SafeAreaHeader = (props: SafeAreaViewProps) => {
    const insets = useSafeAreaInsets();
    return <View style={StyleSheet.flatten([{height: insets.top}, props.style])} />;
};

export const SafeAreaFooter = (props: SafeAreaViewProps) => {
    const insets = useSafeAreaInsets();
    return <View style={StyleSheet.flatten([{height: insets.bottom}, props.style])} />;
};
